<template>
  <div class="container">
    <el-card class="box-card">
      <el-button
        class="newAdd"
        icon="el-icon-edit"
        size="mini"
        type="success"
        @click="$router.push('new')"
      >新增试题</el-button>
      <selected-choice @searchResults="updateList" v-model="list.subjectName" />
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-alert show-icon type="info">
          <div slot="title">数据一共{{counts}}条</div>
        </el-alert>
        <el-tab-pane v-for="item in tabList" :key="item.id" :label="item.label" :name="item.name">
          <el-table :data="goodList" style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="120"></el-table-column>
            <el-table-column prop="subject" label="学科" width="120"></el-table-column>
            <el-table-column prop="catalog" label="目录" width="120"></el-table-column>
            <el-table-column prop="questionType" label="题型" width="120">
              <template slot-scope="scope">{{scope.row.questionType |questionType}}</template>
            </el-table-column>
            <el-table-column prop="question" label="题干" width="280">
              <template slot-scope="scope">
                <div v-html="scope.row.question"></div>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="180">
              <template slot-scope="scope">{{scope.row.addDate| parseTimeByString}}</template>
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="80">
              <template slot-scope="scope">{{scope.row.difficulty | difficulty}}</template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120"></el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="120">
              <template slot-scope="scope">{{scope.row.chkState | chkState}}</template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="150"></el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120"></el-table-column>
            <el-table-column prop="publishState" label="发布状态" width="150">
              <template slot-scope="scope">{{scope.row.publishState==0?'上架':'下架'}}</template>
            </el-table-column>
            <el-table-column fixed="right" class="lastTable" prop="address" label="操作" width="200">
              <template slot-scope="scope">
                <el-button @click="preSeeButton(scope.row)" type="text">预览</el-button>
                <el-button
                  @click="checkOut(scope.row)"
                  type="text"
                  :disabled="scope.row.chkState!==0?true:false"
                >审核</el-button>
                <el-button
                  @click="$router.push({name:'questions-new',query:{id:scope.row.id}})"
                  type="text"
                >修改</el-button>
                <el-button
                  @click="isShow(scope.row)"
                  type="text"
                >{{scope.row.publishState==1?'上架':'下架'}}</el-button>
                <el-button @click="deleteButton(scope.row)" type="text">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
      ></el-pagination>
    </el-card>
    <!-- dialog对话框 -->
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="60%" @close="closeDialog">
      <questions-preview v-if="titlePreSee" ref="updateData" :goodList="rowList" />
      <questions-check ref="check" v-else />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import instance from '@/utils/request'
import selectedChoice from '../components/selected-choice'
import questionsPreview from '../components/questions-preview'
import questionsCheck from '../components/questions-check'
export default {
  components: {
    selectedChoice,
    questionsPreview,
    questionsCheck,
  },
  data() {
    return {
      list: [],
      rowList: {},
      activeName: 'first',
      counts: 0,
      goodList: [],
      counts: 0,
      queryInfo: {
        chkState: null,
        subjectID: null,
        page: 1,
        pagesize: 5,
      },
      tabList: [
        {
          id: 1,
          name: 'first',
          label: '全部',
        },
        {
          id: 2,
          name: 'second',
          label: '待审核',
        },
        {
          id: 3,
          name: 'third',
          label: '已审核',
        },
        {
          id: 4,
          name: 'fourth',
          label: '已拒绝',
        },
      ],
      dialogVisible: false,
      titlePreSee: false,
    }
  },
  filters: {
    questionType(num) {
      if (num == 1) {
        return '单选'
      } else if (num == 2) {
        return '多选'
      } else {
        return '简答'
      }
    },
    difficulty(num) {
      if (num == 1) {
        return '简单'
      } else if (num == 2) {
        return '一般'
      } else {
        return '困难'
      }
    },
    chkState(num) {
      if (num == 0) {
        return '待审核'
      } else if (num == 1) {
        return '已审核'
      } else {
        return '已拒绝'
      }
    },
  },
  created() {
    this.getGoodList()
  },
  methods: {
    // 关闭弹出框事件
    closeDialog() {
      this.$refs.updateData.closeVedio()
    },
    handleClick(tab) {
      // console.log(tab)
      if (tab.name === 'second') {
        this.queryInfo.chkState = 0
        // this.getGoodList()
      } else if (tab.name === 'third') {
        this.queryInfo.chkState = 1
      } else if (tab.name === 'fourth') {
        this.queryInfo.chkState = 2
      } else this.queryInfo.chkState = null
      this.getGoodList()
    },
    async getGoodList() {
      try {
        const { data: res } = await instance({
          method: 'GET',
          url: '/questions/choice',
          params: this.queryInfo,
        })
        console.log(res)
        this.goodList = res.items
        this.counts = res.counts
      } catch (err) {
        console.log(err)
        this.$message.error('获取精选列表失败')
      }
      this.queryInfo.subjectID = null
    },
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.getGoodList()
    },
    handleCurrentChange(val) {
      this.queryInfo.page = val
      this.getGoodList()
    },
    updateList(id) {
      if (id) {
        this.queryInfo.subjectID = id
      }

      this.getGoodList()
    },
    preSeeButton(x) {
      this.dialogVisible = true
      this.titlePreSee = true
      // console.log(x)
      this.rowList = x
      setTimeout(() => {
        this.$refs.updateData.getQuestions()
      }, 10)
    },
    checkOut(x) {
      this.dialogVisible = true
      this.titlePreSee = false
      // this.rowList = x
      // setTimeout(() => {
      //   this.$refs.check.changeState(x.id)
      // }, 10)
    },
    submitData() {
      this.dialogVisible = false
      if (this.titlePreSee === false) {
        this.$refs.check.changeState(this.rowList.id)
      }
      console.log(this.rowList.id)
      this.getGoodList()
    },
    async deleteButton(x) {
      const congfirmlayout = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)
      if (congfirmlayout !== 'confirm') return this.$message.info('已取消删除')
      console.log(x.id)
      const { data: res } = await instance({
        method: 'DELETE',
        url: `/questions/${x.id}`,
      })
      this.$message.success('删除成功')
      // console.log(res)
      this.getGoodList()
    },
    async isShow(x) {
      const congfirmlayout = await this.$confirm('是否确定', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).catch((err) => err)
      if (congfirmlayout !== 'confirm') return this.$message.info('已取消删除')
      console.log(x.id)
      if (x.publishState == 0) {
        x.publishState = 1
      } else if (x.publishState == 1) {
        x.publishState = 0
      }
      const { data: res } = await instance({
        method: 'POST',
        url: `/questions/choice/${x.id}/${x.publishState}`,
      })
      console.log(res)

      this.getGoodList()
    },
  },
}
</script>

<style scoped lang='less'>
.container {
  .el-card {
    margin-top: 10px;
    padding-top: 50px;
    // padding-left: 50px;

    .el-card__body {
      display: flex;
    }
  }
  .newAdd {
    position: absolute;
    top: 20px;
    right: 20px;
  }

  .el-table {
    margin-top: 10px;
    margin-bottom: 10px;

    .cell {
      .el-button {
        margin: 4px;
        font-size: 12px !important;
      }
    }
  }
}
</style>
